<template>
  <div class="detail">
    <!-- 头部标题 -->
    <div class="box1">
      <h2 class="shezhi">文章详情</h2>
      <router-link to="/dynamic">
        <i class="jiantou iconfont icon-jiantou2"></i>
      </router-link>
    </div>
    <!-- 文章标题 -->
    <h1 class="title">{{indexList.post.title}}<van-tag style="margin-left:10px;"
               v-if="indexList.post.status === 0"
               color="#4d6ef1"
               plain
               size="medium">首发</van-tag>
      <van-tag style="margin-left:10px;"
               v-if="indexList.post.status === 1"
               color="red"
               plain
               size="medium">热帖</van-tag>
    </h1>
    <!-- 作者信息+时间+好友 -->
    <div class="box2">
      <div class="left">
        <img :src="`http://123.56.23.31:88/st/${indexList.userVO.faceImage}`"
             alt />
        <div style="line-height:23px;">
          <div class="authName"
               style="font-size:18px; font-weight:blod;">{{indexList.userVO.username}}</div>
          <div class="authTime"
               style="font-size:12px; color:#ccc;">{{indexList.post.createTime.substr(0,10)}}</div>
        </div>
      </div>
      <div class="right">
        <van-tag type="primary"
                 size="large"
                 @click="addFriend"
                 round>+好友</van-tag>
      </div>
    </div>

    <!-- 文章区域 -->
    <article class="box3">
      {{indexList.post.content}}
      <div class="imgShow">
        <img :src="indexList.post.score"
             alt="">
      </div>
      <div class="fenxiang">
        <i :style="myUserlikeStatus === 0? '': 'color:skyblue'"
           @click="articleLike"
           class="pinglun iconfont icon-dianzan2"> {{likeCount}}</i>
        <i style="color:orange"
           class="pinglun iconfont icon-pinglun1"
           @click="showMessagePinLun = true"> {{commentCount}}</i>
        <i style="color:yellowgreen"
           class="pinglun iconfont icon-xie"
           @click="showPinLun = true"> 评论</i>
      </div>
    </article>
    <!-- 评论区域 -->
    <div class="message">
      <van-popup v-model="showMessagePinLun"
                 round
                 position="bottom"
                 :style="{ height: '88%' }">
        <div style="margin-bottom:60px">
          <header>全部{{commentCount}}条评论</header>
        </div>
        <!-- 渲染评论的盒子 -->
        <div v-for="(item,index) in pinlun"
             @click="sendMessageFirst(item.userBO1.username,item.userBO1.userId,item.comment.id)"
             :key="index">
          <!-- 一级评论渲染区 -->
          <div class="reanderMessage">
            <div class="left"
                 @click="showfirstPinlun = true">
              <img :src="'http://123.56.23.31:88/st/' + item.userBO1.faceImage"
                   alt="">
              <div>
                <div style="font-size:14px; font-weight:800; margin-bottom:6px;"
                     class="username">
                  {{item.userBO1.username}}
                  <span style="font-size:13px; color:#ccc;"
                        class="content">{{item.comment.createTime.substr(0,10)}}</span>
                </div>
                <div style="font-size:15px;"
                     class="content">{{item.comment.content}}</div>
              </div>
            </div>

            <!-- 评论点赞+上角标 -->
            <div>
              <van-badge :content="item.likeCount">
                <div class="child">
                  <i :style="item.likeStatus === 0? 'font-size: 20px;' : 'font-size: 20px; color: orange;'"
                     @click="yijiDianzan(item.comment.id)"
                     class="iconfont icon-dianzan1"></i>
                </div>
              </van-badge>
            </div>
          </div>

          <!-- 二级评论渲染区 -->
          <div class="secondMessage"
               v-for="(item,index) in item.replys"
               :key="index">
            <div class="left">
              <img :src="'http://123.56.23.31:88/st/' + item.userBO2.faceImage"
                   alt="">
              <div>
                <div style="font-size:13px; font-weight:800; margin-bottom:6px;"
                     class="username">
                  {{item.userBO2.username}}
                  <span style="font-size:12px; color:#ccc;"
                        class="content">{{item.reply.createTime.substr(0,10)}}</span>
                </div>
                <div style="font-size:14px;"
                     class="content">{{item.reply.content}}</div>
              </div>
            </div>
            <div class="erjiMessage">
              <van-badge :content="item.likeCount">
                <div class="child">
                  <i :style="item.likeStatus === 0? 'font-size: 20px;' : 'font-size: 20px; color: orange;'"
                     @click="erjiDianzan(item.reply.id,item.userBO2.userId)"
                     class="iconfont icon-dianzan1"></i>
                </div>
              </van-badge>
            </div>
          </div>

        </div>
      </van-popup>
    </div>
    <!-- 提交评论 -->
    <van-popup v-model="showPinLun"
               round
               position="bottom"
               :style="{ height: '13%' }">
      <van-cell-group>
        <van-field v-model="pinlunxiaoxi"
                   rows="2"
                   autosize
                   label="评论"
                   type="textarea"
                   maxlength="50"
                   placeholder="请输入评论"
                   show-word-limit>
          <template #button>
            <van-button size="small"
                        @click="sendMessage(indexList.post.id)"
                        type="primary">发送</van-button>
          </template>
        </van-field>
      </van-cell-group>
    </van-popup>
    <!-- 提交评论2 -->
    <van-popup v-model="showfirstPinlun"
               round
               position="bottom"
               :style="{ height: '13%' }">
      <van-cell-group>
        <van-field v-model="pinlunxiaoxiFirst"
                   rows="2"
                   autosize
                   label="评论"
                   type="textarea"
                   maxlength="50"
                   :placeholder="'回复:' + huifuusername"
                   show-word-limit>
          <template #button>
            <van-button size="small"
                        @click="sendFirstMessage"
                        type="primary">发送</van-button>
          </template>
        </van-field>
      </van-cell-group>
    </van-popup>
  </div>
</template>

<script>
import { getDetailMessage, sendFriendRequest, likeArticle, likeMessageFirst, likeMessageSecond, addComment, addCommentFirst } from "../../api/getData.js";
export default {
  data () {
    return {
      indexList: {},
      showMessagePinLun: false,
      showPinLun: false,
      pinlunxiaoxi: "",
      pinlunxiaoxiFirst: "",
      userInfo: {},
      pinlun: [],
      likeCount: 0,
      commentCount: 0,
      myUserlikeStatus: 0,
      showfirstPinlun: false,
      huifuusername: "",
      targetId: "",
      entityId: ""
    }
  },
  created () {
    this.userInfo = JSON.parse(window.localStorage.getItem('userData'))
    let index = JSON.parse(this.$route.params.detailData)
    this.indexList = index
    this.getMessagePinlun(this.indexList.post.id)
    console.log(this.indexList);
  },
  methods: {
    getMessagePinlun (id) {
      this.$message.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      getDetailMessage(id, this.userInfo.id).then(res => {
        this.$message.clear()
        this.$message.success("加载成功")
        this.pinlun = res.data.data.commentVoList
        this.likeCount = res.data.data.likeCount
        this.commentCount = res.data.data.commentVoList.length
        this.myUserlikeStatus = res.data.data.likeStatus
      })
    },
    // 对帖子发送评论
    sendMessage (entityId) {
      addComment(this.userInfo.id, this.pinlunxiaoxi, entityId).then(res => {
        this.getMessagePinlun(this.indexList.post.id)
        this.showPinLun = false
      })
    },
    // 回复一级评论
    sendFirstMessage () {
      console.log(this.userInfo.id, this.targetId, this.pinlunxiaoxiFirst, this.entityId);
      addCommentFirst(this.userInfo.id, this.targetId, this.pinlunxiaoxiFirst, this.entityId).then(res => {
        this.$message("回复成功")
        this.showfirstPinlun = false
      })
      setTimeout(() => {
        this.getMessagePinlun(this.indexList.post.id)
      }, 800)
    },
    sendMessageFirst (huifuusername, targetId, entityId) {
      this.huifuusername = huifuusername
      this.targetId = targetId
      this.entityId = entityId
    },
    // 添加好友
    addFriend () {
      if (this.indexList.userVO.username === this.userInfo.username) {
        this.$message.fail("自己不能给自己发送请求")
        return;
      }
      sendFriendRequest(this.indexList.userVO.username, this.userInfo.id).then(() => {
        this.$message.success("发送请求成功")
      })
    },
    // 文章点赞
    articleLike () {
      this.$message.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      likeArticle(this.userInfo.id, this.indexList.post.id).then((res) => {
        if (res.data.data.likeStatus === 0) {
          this.likeCount = res.data.data.likeCount
          this.myUserlikeStatus = res.data.data.likeStatus
          this.$message.clear()
          this.$message("取消点赞")
        } else {
          this.likeCount = res.data.data.likeCount
          this.myUserlikeStatus = 1
          this.$message.clear()
          this.$message("点赞成功")
        }
      })
    },
    // 评论点赞
    yijiDianzan (entityId) {
      this.$message.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      likeMessageFirst(this.userInfo.id, entityId).then(res => {
        this.$message.clear()
        if (res.data.data.likeStatus === 0) {
          this.$message("取消点赞")

        } else {
          this.$message("点赞成功")
        }
        setTimeout(() => {
          this.getMessagePinlun(this.indexList.post.id)
        }, 800)
      })
    },
    erjiDianzan (entityId, entityUserId) {
      this.$message.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      likeMessageSecond(this.userInfo.id, entityId, entityUserId).then(res => {
        this.$message.clear()
        if (res.data.data.likeStatus === 0) {
          this.$message("取消点赞")

        } else {
          this.$message("点赞成功")

        }
        setTimeout(() => {
          this.getMessagePinlun(this.indexList.post.id)
        }, 800)
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.box1 {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-image: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%);
  position: relative;
  margin-bottom: 16px;
}
.shezhi {
  left: 50%;
  font-weight: bold;
  position: absolute;
  transform: translate(-50%, 0px);
}
.jiantou {
  font-size: 22px;
  color: black;
  margin-left: 4px;
}
.title {
  font-size: 20px;
  font-weight: bold;
  margin: 4px;
  padding: 4px;
  line-height: 40px;
}
.box2 {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box2 .left {
  margin-left: 15px;
  display: flex;
  align-items: center;
}
.box2 .right {
  margin-right: 15px;
}
.box2 .left img {
  margin-right: 18px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.box3 {
  font-size: 17px;
  font-weight: 400;
  padding: 15px;
  margin: 30px 8px 8px 8px;
  line-height: 30px;
  border: 1px dashed #ccc;
  box-shadow: 0px 0px 5px #ccc;
}
.fenxiang {
  width: 100;
  height: 30px;
  display: flex;
  justify-content: space-around;
  line-height: 30px;
  margin-top: 40px;
}
.imgShow {
  margin-top: 15px;
}
.imgShow img {
  width: 100%;
}
.message header {
  width: 100%;
  height: 60px;
  line-height: 60px;
  /* margin: 30px auto; */
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  position: fixed;
  /* z-index: 11; */
  background: #fff;
  border-radius: 20px;
}
.message .reanderMessage {
  padding: 20px;
  display: flex;
  justify-content: space-between;
}
.reanderMessage img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  margin-right: 16px;
}
.reanderMessage .left {
  display: flex;
  align-items: center;
}
.secondMessage {
  display: flex;
  justify-content: space-between;
  margin-left: 40px;
  margin-bottom: 10px;
}
.secondMessage .left {
  display: flex;
  align-items: center;
}
.secondMessage img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin-right: 16px;
}
.child {
  width: 27px;
  border-radius: 4px;
}
/deep/.erjiMessage .van-badge__wrapper {
  margin-right: 20px;
}
</style>